<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AnimeWave - 二次元世界</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.8/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/7.0.0/css/all.min.css">
    <!-- Anime.js -->
    <script src="https://cdn.bootcdn.net/ajax/libs/animejs/3.2.1/anime.min.js"></script>
    <style>
        :root {
            --primary: #ff6b6b;
            --secondary: #4ecdc4;
            --accent: #ff9f1c;
            --light: #f8f9fa;
            --dark: #212529;
            --pink: #ff85a2;
            --purple: #a663cc;
        }

        body, html {
            margin: 0;
            padding: 0;
            overflow-x: hidden;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #ffd6e7, #c1e3ff, #ffd6e7);
            background-size: 400% 400%;
            animation: gradientBG 15s ease infinite;
            color: var(--dark);
        }

        @keyframes gradientBG {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        .navbar {
            backdrop-filter: blur(10px);
            background-color: rgba(255, 255, 255, 0.8) !important;
            transition: all 0.3s ease;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }

        .navbar-brand {
            font-weight: bold;
            background: linear-gradient(45deg, var(--primary), var(--accent));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-size: 1.8rem;
        }

        .nav-link {
            color: var(--dark) !important;
            font-weight: 600;
            position: relative;
            transition: all 0.3s ease;
        }

        .nav-link:hover {
            color: var(--primary) !important;
            transform: translateY(-2px);
        }

        .nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: 0;
            left: 50%;
            background: var(--primary);
            transition: all 0.3s ease;
            transform: translateX(-50%);
        }

        .nav-link:hover::after {
            width: 80%;
        }

        .hero-section {
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .hero-content {
            z-index: 2;
            padding: 2rem;
            background: rgba(255, 255, 255, 0.7);
            border-radius: 20px;
            backdrop-filter: blur(10px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            animation: float 6s ease-in-out infinite;
        }

        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
            100% { transform: translateY(0px); }
        }

        .hero-content h1 {
            font-size: 4rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 3px;
            margin-bottom: 1rem;
            background: linear-gradient(45deg, var(--primary), var(--accent), var(--secondary));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
        }

        .hero-content p {
            font-size: 1.5rem;
            max-width: 800px;
            margin: 0 auto 2rem;
            color: var(--dark);
        }

        .btn-custom {
            background: linear-gradient(45deg, var(--primary), var(--accent));
            border: none;
            padding: 12px 30px;
            border-radius: 30px;
            color: white;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4);
        }

        .btn-custom:hover {
            transform: translateY(-5px) scale(1.05);
            box-shadow: 0 10px 25px rgba(255, 107, 107, 0.6);
        }

        .section-padding {
            padding: 100px 0;
        }

        .section-title {
            text-align: center;
            margin-bottom: 60px;
            position: relative;
        }

        .section-title h2 {
            font-size: 2.5rem;
            display: inline-block;
            padding: 10px 30px;
            background: white;
            border-radius: 50px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            position: relative;
            z-index: 1;
        }

        .section-title h2::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 20px;
            background: var(--secondary);
            bottom: 5px;
            left: 0;
            z-index: -1;
            border-radius: 50px;
        }

        .feature-card {
            background: white;
            border-radius: 20px;
            padding: 30px;
            text-align: center;
            transition: all 0.3s ease;
            height: 100%;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            border: 2px solid transparent;
            position: relative;
            overflow: hidden;
        }

        .feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
            border-color: var(--primary);
        }

        .feature-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: linear-gradient(90deg, var(--primary), var(--accent), var(--secondary));
        }

        .feature-icon {
            font-size: 3rem;
            margin-bottom: 20px;
            width: 80px;
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            margin: 0 auto 20px;
            background: linear-gradient(45deg, var(--primary), var(--accent));
            color: white;
            box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4);
        }

        .stats-section {
            background: rgba(255, 255, 255, 0.8);
            border-top: 1px solid rgba(0, 0, 0, 0.05);
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        }

        .stat-item {
            text-align: center;
            padding: 20px;
        }

        .stat-number {
            font-size: 3rem;
            font-weight: 800;
            background: linear-gradient(45deg, var(--primary), var(--accent));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 10px;
        }

        .contact-section {
            background: white;
            border-radius: 30px;
            margin: 0 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }

        .form-control {
            background: #f8f9fa;
            border: 2px solid #e9ecef;
            color: var(--dark);
            padding: 12px 15px;
            border-radius: 12px;
            margin-bottom: 20px;
            transition: all 0.3s ease;
        }

        .form-control:focus {
            background: white;
            border-color: var(--primary);
            box-shadow: 0 0 0 0.25rem rgba(255, 107, 107, 0.25);
            color: var(--dark);
        }

        footer {
            background: rgba(0, 0, 0, 0.8);
            padding: 30px 0;
            text-align: center;
            color: rgba(255, 255, 255, 0.7);
        }

        .social-icons a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            color: white;
            margin: 0 10px;
            transition: all 0.3s ease;
            font-size: 1.2rem;
        }

        .social-icons a:hover {
            background: linear-gradient(45deg, var(--primary), var(--accent));
            transform: translateY(-5px) rotate(10deg);
            box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4);
        }

        .anime-character {
            position: absolute;
            z-index: 1;
            opacity: 0.8;
        }

        .character-1 {
            top: 10%;
            left: 5%;
            width: 120px;
            animation: float 8s ease-in-out infinite;
        }

        .character-2 {
            bottom: 15%;
            right: 7%;
            width: 150px;
            animation: float 7s ease-in-out infinite reverse;
        }

        .bubble {
            position: absolute;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.3);
            animation: float 15s infinite ease-in-out;
        }

        @media (max-width: 768px) {
            .hero-content h1 {
                font-size: 2.5rem;
            }
            
            .hero-content p {
                font-size: 1.1rem;
            }
            
            .section-padding {
                padding: 60px 0;
            }
            
            .character-1, .character-2 {
                display: none;
            }
        }

        .floating-elements {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            pointer-events: none;
        }

        .floating-element {
            position: absolute;
            border-radius: 50%;
            background: rgba(255, 107, 107, 0.1);
            animation: float 15s infinite ease-in-out;
        }

        @keyframes float {
            0% { transform: translate(0, 0) rotate(0deg); }
            25% { transform: translate(20px, 20px) rotate(90deg); }
            50% { transform: translate(0, 40px) rotate(180deg); }
            75% { transform: translate(-20px, 20px) rotate(270deg); }
            100% { transform: translate(0, 0) rotate(360deg); }
        }
    </style>
</head>
<body>
    <!-- 浮动装饰元素 -->
    <div class="floating-elements" id="floatingElements"></div>

    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light fixed-top">
        <div class="container">
            <a class="navbar-brand" href="#">
                <h3 class="mb-0">Anime<span>Wave</span></h3>
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#features">特性</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#stats">数据</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#contact">联系</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 英雄区域 -->
    <section class="hero-section">
        <!-- 装饰角色 -->
        <img src="https://cdn.pixabay.com/photo/2021/08/24/17/13/anime-6570089_960_720.png" alt="Anime Character" class="anime-character character-1">
        <img src="https://cdn.pixabay.com/photo/2021/08/24/17/13/anime-6570090_960_720.png" alt="Anime Character" class="anime-character character-2">
        
        <div class="container">
            <div class="hero-content">
                <h1>进入二次元世界</h1>
                <p>探索无限可能的动漫宇宙，体验青春、活力与浪漫的完美融合</p>
                <button class="btn btn-custom">开始冒险</button>
            </div>
        </div>
    </section>

    <!-- 特性区域 -->
    <section class="section-padding" id="features">
        <div class="container">
            <div class="section-title">
                <h2>精彩内容</h2>
            </div>
            <div class="row g-4">
                <div class="col-md-4">
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="fas fa-heart"></i>
                        </div>
                        <h3>浪漫故事</h3>
                        <p>体验心动不已的恋爱剧情，感受青春年华的美好时光</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="fas fa-fist-raised"></i>
                        </div>
                        <h3>热血战斗</h3>
                        <p>感受激情四溢的战斗场面，体验成长与友情的力量</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="fas fa-laugh"></i>
                        </div>
                        <h3>搞笑日常</h3>
                        <p>享受轻松愉快的日常生活，释放压力，收获快乐</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 统计数据区域 -->
    <section class="stats-section section-padding" id="stats">
        <div class="container">
            <div class="row">
                <div class="col-md-3 col-6">
                    <div class="stat-item">
                        <div class="stat-number" data-count="1000">0</div>
                        <h4>作品数量</h4>
                    </div>
                </div>
                <div class="col-md-3 col-6">
                    <div class="stat-item">
                        <div class="stat-number" data-count="500">0</div>
                        <h4>创作者</h4>
                    </div>
                </div>
                <div class="col-md-3 col-6">
                    <div class="stat-item">
                        <div class="stat-number" data-count="100">0</div>
                        <h4>合作社区</h4>
                    </div>
                </div>
                <div class="col-md-3 col-6">
                    <div class="stat-item">
                        <div class="stat-number" data-count="95">0</div>
                        <h4>用户满意度</h4>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 联系我们区域 -->
    <section class="section-padding" id="contact">
        <div class="container">
            <div class="contact-section">
                <div class="section-title">
                    <h2>加入我们</h2>
                </div>
                <div class="row">
                    <div class="col-lg-6">
                        <form>
                            <div class="mb-3">
                                <input type="text" class="form-control" placeholder="你的昵称">
                            </div>
                            <div class="mb-3">
                                <input type="email" class="form-control" placeholder="电子邮箱">
                            </div>
                            <div class="mb-3">
                                <textarea class="form-control" rows="5" placeholder="想说的话"></textarea>
                            </div>
                            <button type="submit" class="btn btn-custom w-100">发送消息</button>
                        </form>
                    </div>
                    <div class="col-lg-6">
                        <div class="ps-lg-5 mt-4 mt-lg-0">
                            <h3>动漫爱好者聚集地</h3>
                            <p class="mt-4">在这里，你可以找到志同道合的朋友，分享喜爱的作品，参与有趣的活动，一起创造属于我们的二次元世界。</p>
                            <div class="mt-4">
                                <p><i class="fas fa-map-marker-alt me-2"></i> 动漫星球，梦想街道123号</p>
                                <p><i class="fas fa-phone me-2"></i> +86 123 4567 8900</p>
                                <p><i class="fas fa-envelope me-2"></i> info@animeworld.com</p>
                            </div>
                            <div class="social-icons mt-4">
                                <a href="#"><i class="fab fa-facebook-f"></i></a>
                                <a href="#"><i class="fab fa-twitter"></i></a>
                                <a href="#"><i class="fab fa-instagram"></i></a>
                                <a href="#"><i class="fab fa-discord"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <p>&copy; 2023 AnimeWave. 让我们一起创造美好的二次元回忆！</p>
                </div>
            </div>
        </div>
    </footer>

    <!-- Bootstrap JS -->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.8/js/bootstrap.bundle.min.js"></script>
    <script>
        // 创建浮动装饰元素
        function createFloatingElements() {
            const container = document.getElementById('floatingElements');
            const colors = ['#ff6b6b', '#4ecdc4', '#ff9f1c', '#a663cc', '#ff85a2'];
            
            for (let i = 0; i < 20; i++) {
                const element = document.createElement('div');
                element.classList.add('floating-element');
                
                // 随机大小
                const size = Math.random() * 60 + 20;
                element.style.width = `${size}px`;
                element.style.height = `${size}px`;
                
                // 随机位置
                element.style.left = `${Math.random() * 100}%`;
                element.style.top = `${Math.random() * 100}%`;
                
                // 随机颜色
                element.style.background = colors[Math.floor(Math.random() * colors.length)] + '30';
                
                // 随机动画延迟
                element.style.animationDelay = `${Math.random() * 5}s`;
                
                container.appendChild(element);
            }
        }

        // 初始化粒子效果
        createFloatingElements();

        // 数字动画效果
        function animateValue(obj, start, end, duration) {
            let startTimestamp = null;
            const step = (timestamp) => {
                if (!startTimestamp) startTimestamp = timestamp;
                const progress = Math.min((timestamp - startTimestamp) / duration, 1);
                obj.innerHTML = Math.floor(progress * (end - start) + start);
                if (progress < 1) {
                    window.requestAnimationFrame(step);
                }
            };
            window.requestAnimationFrame(step);
        }

        // 滚动到视图时触发动画
        const observerOptions = {
            root: null,
            rootMargin: "0px",
            threshold: 0.5
        };

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const countElements = entry.target.querySelectorAll('.stat-number');
                    countElements.forEach(el => {
                        const count = parseInt(el.getAttribute('data-count'));
                        animateValue(el, 0, count, 2000);
                    });
                    observer.unobserve(entry.target);
                }
            });
        }, observerOptions);

        // 监听统计区域
        const statsSection = document.getElementById('stats');
        if (statsSection) {
            observer.observe(statsSection);
        }

        // 导航栏滚动效果
        window.addEventListener('scroll', function() {
            const navbar = document.querySelector('.navbar');
            if (window.scrollY > 50) {
                navbar.style.padding = '10px 0';
                navbar.style.boxShadow = '0 5px 20px rgba(0, 0, 0, 0.1)';
            } else {
                navbar.style.padding = '20px 0';
                navbar.style.boxShadow = 'none';
            }
        });

        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    window.scrollTo({
                        top: target.offsetTop - 70,
                        behavior: 'smooth'
                    });
                }
            });
        });

        // 页面加载动画
        document.addEventListener('DOMContentLoaded', function() {
            // 英雄区域标题动画
            anime({
                targets: '.hero-content h1',
                translateX: [-100, 0],
                opacity: [0, 1],
                duration: 1500,
                easing: 'easeOutExpo'
            });
            
            // 英雄区域描述动画
            anime({
                targets: '.hero-content p',
                translateY: [50, 0],
                opacity: [0, 1],
                duration: 1500,
                delay: 300,
                easing: 'easeOutExpo'
            });
            
            // 按钮动画
            anime({
                targets: '.btn-custom',
                scale: [0, 1],
                opacity: [0, 1],
                duration: 1500,
                delay: 600,
                easing: 'easeOutElastic'
            });
        });
    </script>
</body>
</html>